<template>
  <div id="PickDetail">
    <v-details
      :inputConfig="inputConfig"
      :detailData="inputData"
      :rules="rules"
      @pop="setdata"
    ></v-details>
  </div>
</template>

<script>
import details from "commons/Detail";
import baseMixin from "@/mixins/BaseMixin";

export default {
  props: {
    inputData: {
      type: Object,
    },
  },
  mixins: [baseMixin],
  name: "PickDetail",
  data() {
    return {
      newFlag: false,
      rules: {
        storerkey: [{ required: true, trigger: "blur" }],
        sku: [{ required: true, trigger: "blur" }],
      },
    };
  },
  computed: {
    inputConfig() {
      if (this.newFlag) {
        return [
          [
            {
              type: "table",
              label: this.$t("config.shipper"),
              props: "storerkey",
              tableConfig: [
                {
                  label: this.$t("config.shipper"),
                  prop: "storerkey",
                  input: "input",
                },
                {
                  label: this.$t("config.company"),
                  prop: "company",
                  input: "input",
                },
                {
                  label: this.$t("config.city"),
                  prop: "city",
                  input: "input",
                },
                {
                  label: this.$t("config.provice"),
                  prop: "state",
                  input: "input",
                },
                {
                  label: this.$t("config.postcode"),
                  prop: "zip",
                  input: "input",
                },
                {
                  label: this.$t("config.contact"),
                  prop: "contact",
                  input: "input",
                },
                {
                  label: this.$t("config.phone"),
                  prop: "phone",
                  input: "input",
                },
              ],
              url: `/queryStorer/1/?/${this.$store.state.wms}`,
            },
            {
              type: "table",
              label: this.$t("config.sku"),
              props: "sku",
              tableConfig: [
                {
                  label: this.$t("config.sku"),
                  prop: "sku",
                  input: "input",
                },
                {
                  label: this.$t("common.desc"),
                  prop: "descr",
                  input: "input",
                },
                {
                  label: this.$t("config.shipper"),
                  prop: "storerkey",
                  input: "input",
                },
                {
                  label: this.$t("config.packaging"),
                  prop: "packkey",
                  input: "input",
                },
                {
                  label: this.$t("config.boxGroup"),
                  prop: "cartongroupdescr",
                  input: "select",
                  options: this.getOptions("queryCartonizationDropDown"),
                },
                {
                  label: this.$t("config.allocaStrategy"),
                  prop: "strategykey",
                  input: "select",
                  options: this.getOptions("queryAllocatestrategyDropDown"),
                },
                {
                  label: this.$t("config.putawayStrategy"),
                  prop: "putawaystrategykey",
                  input: "select",
                  options: this.getOptions("queryPutawaystrategyDropDown"),
                },
                {
                  label: this.$t("in.serialnumbe"),
                  prop: "serialnumbe",
                  input: "select",
                  options: [],
                },
                {
                  label: this.$t("config.batchValidate"),
                  prop: "lottablevalidationkeydescr",
                  input: "select",
                  options: this.getOptions("queryLottablevalidationDropDown"),
                },
                {
                  label: this.$t("config.area"),
                  prop: "putawayzonedescr",
                  input: "select",
                  options: this.getOptions("queryPutawayzoneDropDown"),
                },
              ],
              filterKey:["descr","sku"],
          filterUrl: `fuzzyQuerySkuByItemNumberAndName/undefined`,
          url: `querySkuOfStorerkey/?/${this.$store.state.wms}/undefined`,
            },
            {
              type: "input",
              label: this.$t("bill.lot"),
              props: "lot",
            },
          ],
          [
            {
              type: "input",
              label: this.$t("outbound.fromloc"),
              props: "fromloc",
            },
            {
              type: "input",
              label: this.$t("in.fromid"),
              props: "fromid",
            },
            {
              type: "input",
              label: this.$t("config.num"),
              props: "qty",
            },
          ],
          [
            {
              type: "input",
              label: this.$t("config.toLoc"),
              props: "toloc",
              disabled: true,
            },
            {
              type: "input",
              label: this.$t("in.toid"),
              props: "toid",
            },
          ],
          [
            {
              type: "input",
              label: this.$t('out.moveqty'),
              props: "moveqty",
            },
          ],
        ];
      } else {
        return [
          [
            {
              type: "table",
              label: this.$t("config.shipper"),
              disabled: true,
              props: "storerkey",
            },
            {
              type: "input",
              label: this.$t("config.sku"),
              disabled: true,
              props: "sku",
            },
            {
              type: "input",
              label: this.$t("bill.lot"),
              disabled: true,
              props: "lot",
            },
            {
              type: "input",
              label: this.$t("config.num"),
              props: "qty",
              disabled: true,
            },
          ],
          [
            {
              type: "input",
              label: this.$t("outbound.fromloc"),
              disabled: true,
              props: "fromloc",
            },
            {
              type: "input",
              label: this.$t("in.fromid"),
              disabled: true,
              props: "fromid",
            },
          ],
          [
            {
              type: "input",
              label: this.$t("config.toLoc"),
              disabled: true,
              props: "toloc",
            },
            {
              type: "input",
              label: this.$t("in.toid"),
              disabled: true,
              props: "toid",
            },
          ],
          [
            {
              type: "input",
              label: this.$t('out.moveqty'),
              props: "moveqty",
              disabled: true,
            },
          ],
        ];
      }
    },
  },
  methods: {
    setdata(data, id, close, listId) {
      if (id == 0) {
        this.inputData.storerkey = data.storerkey;
      } else if (id == 1) {
        this.inputData.sku = data.sku;
      }
      close(false);
    },
  },
  mounted() {
    this.newFlag = this.$store.state.newFlag;
  },
  watch: {
    "inputData.storerkey"(data) {
      this.inputConfig[0].forEach((item) => {
        if (item.props == "sku") {
          item.filterUrl = "fuzzyQuerySkuByItemNumberAndName/" + data;
            item.url = "querySkuOfStorerkey/?/wmwhse1/" + data;

        }
      });
    },
  },
  components: {
    "v-details": details,
  },
};
</script>

<style scoped></style>
